<!-- 职位编辑弹窗 -->
<template>
  <ele-modal
    form
    width="90%"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="类型">
        <el-radio v-model="form.job_type" :label="1" @change="createJobs">
          连续做
        </el-radio>
        <el-radio v-model="form.job_type" :label="2" @change="createJobs">
          单独做
        </el-radio>
      </el-form-item>
      <el-form-item v-if="form.job_type === 2" label="工作日期">
        <el-date-picker
          v-model="form.dates"
          type="dates"
          placeholder="选择一个或多个日期"
          style="width: 500px"
          @change="createJobs"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="会员端显示">
        <el-radio v-model="form.is_display" :label="0">隐藏</el-radio>
        <el-radio v-model="form.is_display" :label="1">显示</el-radio>
      </el-form-item>
      <el-form-item label="工资说明">
        <el-input
          v-model="form.salary_memo"
          style="width: 350px"
          placeholder="选填"
        />
      </el-form-item>
    </el-form>

    <el-table
      :data="jobList"
      element-loading-text="Loading"
      border
      fit
      stripe
      highlight-current-row
    >
      <!-- <el-table-column align="center" label="序号" width="48" type="index" /> -->

      <el-table-column
        v-if="form.job_type === 2"
        label="工作日期"
        width="100"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.date }}
        </template>
      </el-table-column>

      <el-table-column
        v-if="form.job_type === 1"
        label="工作日期"
        width="171"
        align="center"
      >
        <template #default="scope">
          <el-input
            v-model="jobList[scope.$index].work_date"
            style="width: 140px"
            placeholder="请填写工作日期"
          />
        </template>
      </el-table-column>

      <el-table-column
        v-if="shiftsList.length == 0"
        label="工作时间"
        width="171"
        align="center"
      >
        <template #default="scope">
          <el-input
            v-model="jobList[scope.$index].work_time"
            style="width: 140px"
            placeholder="请填写工作时间"
          />
        </template>
      </el-table-column>

      <el-table-column label="报名截止" width="221" align="center">
        <template #default="scope">
          <el-date-picker
            v-model="jobList[scope.$index].deadline"
            style="width: 190px"
            type="datetime"
            placeholder="报名截止时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </template>
      </el-table-column>

      <el-table-column v-if="shiftsList.length > 0" label="班次" align="center">
        <template #default="scope">
          {{ scope.row.shifts }}
        </template>
      </el-table-column>

      <el-table-column label="招聘人数" align="left">
        <template #default="scope">
          <el-input
            v-if="jobList[scope.$index].gender_limit === 0"
            v-model.number="jobList[scope.$index].gender_total"
            style="width: 70px"
            :prefix-icon="User"
          />

          <el-input
            v-if="jobList[scope.$index].gender_limit === 1"
            v-model.number="jobList[scope.$index].gender_boy"
            style="width: 70px; margin-right: 8px"
            :prefix-icon="Male"
            placeholder="男"
          />
          <el-input
            v-if="jobList[scope.$index].gender_limit === 1"
            v-model.number="jobList[scope.$index].gender_girl"
            style="width: 70px"
            :prefix-icon="Female"
            placeholder="女"
          />

          <el-button
            style="margin-left: 8px"
            :icon="Switch"
            size="small"
            circle
            @click="changeGenderLimit(scope.$index)"
          />
        </template>
      </el-table-column>

      <el-table-column label="薪资" align="left">
        <template #default="scope">
          <el-input
            v-model="jobList[scope.$index].salary"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            style="width: 70px; margin-right: 8px"
          />

          <el-select
            v-model="jobList[scope.$index].salary_unit"
            placeholder="工资单位"
            style="width: 100px"
          >
            <el-option
              v-for="item in jobSalaryUnit"
              :key="item.id"
              :label="item.title"
              :value="item.title"
            />
          </el-select>
        </template>
      </el-table-column>

      <!-- <el-table-column label="vip工资" align="center">
          <template slot-scope="scope">

            <el-input v-model="jobList[scope.$index].salary_vip" oninput="value=value.replace(/[^0-9.]/g,'')" style="width:50px" />
            <el-select v-model="jobList[scope.$index].salary_unit" placeholder="工资单位" style="width:100px">
              <el-option
                v-for="item in jobSalaryUnit"
                :key="item.id"
                :label="item.title"
                :value="item.title"
              />
            </el-select>
          </template>
        </el-table-column> -->

      <el-table-column label="分享奖金" align="center" width="126px">
        <template #default="scope">
          <el-input
            v-model.number="jobList[scope.$index].share_bouns"
            style="width: 100px"
            ><template #append>元</template></el-input
          >
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center" width="104px">
        <template #default="scope">
          <el-input
            v-model="jobList[scope.$index].admin_remark"
            placeholder="自己看"
            style="width: 79px"
          />
        </template>
      </el-table-column>

      <el-table-column label="" width="50">
        <template #default="scope">
          <el-button
            circle
            size="small"
            type="danger"
            :icon="Delete"
            @click="handleDeleteJob(scope.$index)"
          />
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="updateModelValue(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, watch } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';

  import { addJobs, getJobSalaryUnit } from '@/api/company';
  import { Female, Male, Switch, User, Delete } from '@element-plus/icons-vue';
  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    data: Object
  });

  /** 弹窗标题 */
  const title = ref('招人');

  /** 是否是修改 */
  const isUpdate = ref(false);

  /** 提交状态 */
  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);

  /** 工作 */
  // const [form, resetFields, assignFields] = useFormData({
  //   salary_memo: '',
  //   is_display: 1,
  //   job_type: 2,
  //   dates: []
  // });

  const form = ref({
    salary_memo: '',
    is_display: 1,
    job_type: 2,
    dates: [],
    position_id: 0
  });

  /** 工资单位列表 */
  const jobList = ref([]);

  /** 福利列表 */
  const shiftsList = ref([]);

  /** 创建工作列表 */
  const createJobs = () => {
    var list = [];
    let shifts = props.data.shifts;

    // 连续做
    if (form.value.job_type === 1) {
      if (shifts.length > 0) {
        // 有班次
        for (var k = 0; k < shifts.length; k++) {
          const v = {};
          v.date = '所有日期';
          v.shifts =
            shifts[k].title +
            ' [ ' +
            shifts[k].start +
            ' - ' +
            shifts[k].end +
            ' ]';
          v.shifts_id = shifts[k].id;
          v.salary_vip = 0;
          v.salary = props.data.salary;
          v.salary_unit = props.data.salary_unit;
          v.gender_boy = '';
          v.gender_girl = '';
          v.gender_total = '';
          v.gender_limit = props.data.gender_limit;
          v.deadline = '';
          v.admin_remark = '';
          v.share_bouns = 0;
          list.push(v);
        }
      } else {
        // 无班次
        const v = {};
        v.date = '所有日期';
        v.shifts = '无';
        v.salary_vip = 0;
        v.salary = props.data.salary;
        v.salary_unit = props.data.salary_unit;
        v.gender_boy = '';
        v.gender_girl = '';
        v.gender_total = '';
        v.gender_limit = props.data.gender_limit;
        v.shifts_id = 0;
        v.deadline = '';
        v.admin_remark = '';
        v.share_bouns = 0;
        list.push(v);
      }
    } else {
      // 单独做
      if (form.value.dates.length < 1) EleMessage.warning('请选择日期!');
      for (var i = 0; i < form.value.dates.length; i++) {
        if (shifts.length > 0) {
          for (var j = 0; j < shifts.length; j++) {
            const v = {};
            v.date = form.value.dates[i];
            v.shifts =
              shifts[j].title +
              ' [ ' +
              shifts[j].start +
              ' - ' +
              shifts[j].end +
              ' ] ';
            v.shifts_id = shifts[j].id;
            v.salary_vip = 0;
            v.salary = props.data.salary;
            v.salary_unit = props.data.salary_unit;
            v.gender_boy = '';
            v.gender_girl = '';
            v.gender_total = '';
            v.gender_limit = props.data.gender_limit;
            v.deadline = form.value.dates[i] + ' ' + shifts[j].start + ':00';
            v.admin_remark = '';
            v.share_bouns = 0;
            list.push(v);
          }
        } else {
          const v = {};
          v.date = form.value.dates[i];
          v.shifts = '无';
          v.salary_vip = 0;
          v.salary = props.data.salary;
          v.salary_unit = props.data.salary_unit;
          v.gender_boy = '';
          v.gender_girl = '';
          v.gender_total = '';
          v.gender_limit = props.data.gender_limit;
          v.shifts_id = 0;
          v.deadline = '';
          v.admin_remark = '';
          v.share_bouns = 0;
          list.push(v);
        }
      }
    }
    console.log(list, '搞毛？');
    jobList.value = list;
  };

  /** 表单验证规则 */
  const rules = reactive({
    title: [
      {
        required: true,
        message: '请输入职位名称',
        type: 'string',
        trigger: 'blur'
      }
    ],
    work_place: [
      {
        required: true,
        message: '请输入工作地点',
        type: 'string',
        trigger: 'blur'
      }
    ],
    work_require: [
      {
        required: true,
        message: '请输入工作内容',
        type: 'string',
        trigger: 'blur'
      }
    ],
    salary: [
      {
        required: true,
        message: '请输入工资待遇',
        type: 'string',
        trigger: 'blur'
      }
    ],

    site_id: [
      {
        required: true,
        message: '请选择站点',
        type: 'array',
        trigger: 'blur'
      }
    ],

    job_category_id: [
      {
        required: true,
        message: '请选择分类',
        type: 'int',
        trigger: 'blur'
      }
    ]
  });

  /** 保存编辑 */
  const save = () => {
    console.log(jobList.value, '保存的时候');
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      loading.value = true;
      var requestData = Object.assign({}, form.value);
      var list = Object.assign({}, jobList.value);
      requestData.dates = '';
      requestData.jobList = JSON.stringify(list);

      addJobs(requestData)
        .then(() => {
          loading.value = false;
          reset();
          EleMessage.success('发布成功');
          updateModelValue(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          EleMessage.error(e.message);
        });
    });
  };
  const reset = () => {
    console.log('不得？');
    form.value.dates = [];
    form.value.is_display = 1;
    form.value.salary_memo = '';
    form.value.job_type = 2;
    jobList.value = [];
    console.log(form, jobList);
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  /** 工资单位列表 */
  const jobSalaryUnit = ref([]);

  /** 获取工资单位 */
  getJobSalaryUnit({ page: 1, limit: 99999999 })
    .then((res) => {
      jobSalaryUnit.value = res.list;
    })
    .catch((e) => {
      EleMessage.error(e.message);
    });

  // 招人 - 切换人数限制
  const changeGenderLimit = (index) => {
    jobList.value[index].gender_limit =
      jobList.value[index].gender_limit === 1 ? 0 : 1;
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        if (props.data) {
          title.value = props.data.title + ' 招人';
          shiftsList.value = props.data.shifts;
          form.value.position_id = props.data.id;
          reset();
          // assignFields({
          //   ...props.data
          // });
          isUpdate.value = true;
        } else {
          isUpdate.value = false;
        }
      } else {
        // resetFields();
        formRef.value?.clearValidate?.();
      }
    }
  );
</script>

<style lang="scss" scoped>
  .mr {
    margin-right: 8px;
  }
</style>
